<template>
   <div>
     <div class="qinzhi">
          <span  class="pinzhi"><b>品质优选</b></span>
          <span class="gengduo"><a href=""><b>更多</b></a></span>
     </div>
     <div class="bbb">
        <span v-for="(cate,index) in cates" :key="index" class="lll">
          <a>
            <img :src="cate.img" alt="">
            <p>{{cate.name}}</p>
          </a>
          <div class="dapai"><b>大牌精选</b></div>
        </span>
     </div>
   </div>
</template>

<script>
export default {
  created () {
    this.$http.get('static/json/recommend.json').then(response => {
      console.log(response.data)
      this.cates = response.data
    })
  },
  data () {
    return {
      cates: []
    }
  }
}
</script>

<style lang='less' scoped>
.bbb{
  display: flex;
  width: 100%;
}
.pinzhi {
  position: relative;
  width: 100%;
  margin: 5px;
}
.pinzhi {
  font-size: 15px;
  color: rgb(241, 161, 95);
  padding: 5px;
}
.gengduo {
  position: relative;
  float: right;
  font-size: 10px;
  padding: 5px;
  right: 0;
}
.gengduo a{
  color: #000;
}
.dapai{
 display: inline-block;
 font-size: 10px;
 color: aqua;
 border: 1px solid aqua;
 padding: 3px;
}
.lll{
  display: inline-block;
   width: 22%;
   padding: 5px;
   text-align: center
}
.lll p{
  color: #000;
  font-size: 10px;
}
</style>
